<template>
  <div class="Recommendnewmusic">
    <div class="main">
      <span style="font-size:20px;cursor: pointer;font-weight:bold;" @click="getJumpsonglist">最新音乐<i class="el-icon-arrow-right" style="font-size:18px;"></i></span>
      <div class="a">
        <div class="b" v-for="item in newmusiclist" :key="item.id">
          <div class="musiclist">
            <img :src="item.picUrl" alt="#">
            <div style="display:flex;flex-direction:column;margin-left:10px;">
              <span style="font-size:15px;opacity:0.7;margin-top: 2px;">{{item.name}}</span>
              <div class="span1">
                <span style="font-size:13px;opacity:0.5;margin-top: 5px;" v-for="(item1,index) in item.song.artists" :key="index">{{item1.name}}</span>
              </div>
            </div>
          </div>
          <i class="iconfont icon-bofang1" style="position: relative;color: #fff;top: -40px;left: 10px;font-size: 30px;opacity: 0.8;"></i>
        </div>
      </div>

    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex'
import Bus from '@/components/eventBus'
export default {
  name: 'Recommendnewmusic',
  data() {
    return {
      //取出音乐数量
      limit: 12
    }
  },
  computed: {
    ...mapState({
      newmusiclist: state => state.Home.newmusiclist
    })
  },
  mounted() {
    this.$store.dispatch('getRecommendnewmusicList', this.limit)
  },
  methods: {
    //点击最新音乐跳转
    getJumpsonglist() {
      this.$router.push('/home/Latestmusic')
      Bus.$emit('Atestmusic', 6)
    }
  }
}
</script>

<style lang="less" scoped>
.Recommendnewmusic {
  .main {
    margin-top: 20px;
    .a {
      display: flex;
      display: grid;
      grid-template-columns: auto auto auto;
      margin-top: 20px;
      width: 1100px;
      .b {
        margin-bottom: -20px;
        .musiclist {
          display: flex;
          width: 350px;
          img {
            width: 50px;
            height: 50px;
            border-radius: 5px;
            display: block;
          }
          img:hover {
            cursor: pointer;
          }
          .span1 {
            span:hover {
              cursor: pointer;
              color: rgb(55, 56, 56);
            }
          }
        }
        .musiclist:hover {
          background-color: rgb(229, 231, 231);
        }
        i:hover {
          cursor: pointer;
        }
      }
    }
  }
}
</style>